<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</body>
<script>
	var btns = document.querySelectorAll("button");
	// for(var i=0;i<btns.length;i++){
	// 	btns[i].onclick = function(){
	// 		console.log(i);
	// 	}
	// }
	// var i=0;
	// btns[i].onclick = function(){
	// 	console.log(i);
	// }
	// i++;// 1
	// btns[i].onclick = function(){
	// 	console.log(i);
	// }
	// i++;// 2
	// btns[i].onclick = function(){
	// 	console.log(i);
	// }
	// i++;// 3
	// btns[i].onclick = function(){
	// 	console.log(i);
	// }
	// i++;// 4
	// btns[i].onclick = function(){
	// 	console.log(i);
	// }
	// i++;//5
	
	// for(let i=0;i<btns.length;i++){
	// 	btns[i].onclick = function(){
	// 		console.log(i);
	// 	}
	// }
	// 相当于：
	// {
	// 	let i = 0;
	// 	btns[i].onclick = function(){
	// 		console.log(i);
	// 	}
	// }
	// {
	// 	let i = 1;
	// 	btns[i].onclick = function(){
	// 		console.log(i);
	// 	}
	// }
	// {
	// 	let i = 2;
	// 	btns[i].onclick = function(){
	// 		console.log(i);
	// 	}
	// }
	// {
	// 	let i = 3;
	// 	btns[i].onclick = function(){
	// 		console.log(i);
	// 	}
	// }
	// {
	// 	let i = 4;
	// 	btns[i].onclick = function(){
	// 		console.log(i);
	// 	}
	// }
	
	// for(var i=0;i<btns.length;i++){
	// 	btns[i].onclick = (function(i){
	// 		return function(){
	// 			console.log(i);
	// 		}
	// 	})(i);
	// }
	
	var i = 0;
	btns[i].onclick = (function(i){
		return function(){
			console.log(i)
		}
	})(i);
	
	var i = 1;
	btns[i].onclick = (function(i){
		return function(){
			console.log(i)
		}
	})(i);
	var i = 2;
	btns[i].onclick = (function(i){
		return function(){
			console.log(i)
		}
	})(i);

</script>
</html>